{% extends 'base.html' %}
{% load static %}

{% block title %}
{{ topic.subject }}
{% endblock %}

{% block breadcrumb %}
<li class="breadcrumb-item">
    <a href="{% url 'Home' %}">
        Boards
    </a>
</li>
<li class="breadcrumb-item">
    <a href="{% url 'board_topics' topic.board.pk %}">
        {{ topic.board.name }}
    </a>
</li>
<li class="breadcrumb-item active">
    {{ topic.subject }}
</li>
{% endblock %}

{% block content %}
    <div class="mb-4">
        <a href="{% url 'reply_topic' topic.board.pk topic.pk %}" class="btn btn-primary" role="button">Reply</a>
    </div>
            {% for post in topic.posts.all %}
{#            <div class="card mb-2">#}

                <div class="card mb-2 {% if forloop.first %}border-dark{% endif %}">
                    {% if forloop.first %}
                        <div class="card-header text-white bg-dark py-2 px-3">
                            {{ topic.subject }}
                        </div>
                    {% endif %}

                <div class="card-body p-3">
                    <div class="row">
                        <div class="col-2">
                            <img src="{% static 'img/shattered.png' %}" alt="{{post.created_by.username }}" class="w-100">
                            <small>Posts: {{ post.created_by.posts.count }}</small>
                        </div>
                        <div class="col-10">
                            <div class="row mb-3">
                                <div class="col-6">
                                    <strong class="text-muted">{{ post.created_by.username }}</strong>
                                </div>
                                <div class="col-6 text-right">
                                    <small class="text-muted">{{ post.created_at}}</small>
                                </div>
                            </div>
                            {{ post.message }}
                            {% if post.created_by == user %}
                            <div class="mt-3">
                                <a href="{% url 'edit_post' post.topic.board.pk post.topic.pk post.pk %}" class="btn btn-primary btn-sm" role="button">Edit</a>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
         {% endfor %}
{% endblock %}